<template>
  <div class="footer">
    <div class="pageFooter">
      <div class="aboutContainer">
        <div class="download">
          <div class="downloadTel title">下载千千客户端</div>
          <div class="channel">
            <div class="channelItem">
              <i class="iconfont icon-anzhuo" /><br />
              <span>Android版</span>
            </div>
            <div class="channelItem">
              <i class="iconfont icon-iphone" /><br />
              <span>iPhone版</span>
            </div>
            <div class="channelItem">
              <i class="iconfont icon-windows-fill" /><br />
              <span>Window版</span>
            </div>
            <div class="channelItem">
              <i class="iconfont icon-bijiben" /><br />
              <span>MAC版</span>
            </div>
          </div>
        </div>
        <div class="music">
          <div class="musicTel title">关于千千音乐</div>
          <div class="musicContainer">
            <div>意见反馈</div>
            <div>联系我们</div>
            <div>DMH数字音乐分发平台</div>
            <div>音乐人入驻</div>
            <div>音乐节场内消费</div>
          </div>
        </div>
        <div class="follow">
          <div class="followTel title">关注千千音乐</div>
          <div class="followContainer">
            <div class="wb">
              <i class="iconfont icon-weibo" />
              <span>关注微博</span>
            </div>
            <div class="wx">
              <i class="iconfont icon-weixin-copy" />
              <span>微信公众号</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footerCopyRight">
      <div class="copyRight copyRight1">
        Copyright 2018 © .TAIHE MUSIC GROUP. 深圳太乐文化科技有限公司版权所有
        <span>[粤ICP备17102508号-2]</span>
      </div>
      <div class="copyRight2 copyRight">
        <span>信息网络传播视听许可证: 1910523</span>|
        <span> 粤公网安备: 44030502002309号 </span>|
        <span>增值电信业务经营许可证: 粵B2-20180819</span>|
        <span>网络文化经营许可证号码: 粤网文[2018]0902-359号</span>
      </div>
      <div class="copyRight3 copyRight">
        <span>举报邮箱: jubao@taihe.com</span>|
        <span>反馈中心</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Footer",
});
</script>

<script lang="ts" setup></script>

<style lang="less" scoped>
.footer {
  margin-top: 50px;
  .pageFooter {
    height: 280px;
    background-color: #282828;
    display: flow-root;
    .aboutContainer {
      width: 1200px;
      margin: 70px auto;
      display: flex;
      .download {
        width: 430px;
        height: 143px;
        margin-right: 54px;
        .channel {
          display: flex;
          .channelItem {
            width: 100px;
            height: 50px;
            padding: 25px 0;
            margin-right: 10px;
            background-color: #303133;
            text-align: center;
            color: #909399;
            cursor: pointer;
            img {
              width: 28px;
              height: 28px;
            }
          }
        }
      }
      .music {
        width: 330px;
        height: 143px;
        margin-right: 54px;
        .musicContainer {
          display: flex;
          flex-wrap: wrap;
          div {
            color: #909399;
            cursor: pointer;
            margin-right: 20px;
            line-height: 30px;
            font-size: 12px;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
  }
}
.followContainer {
  width: 330px;
  height: 100px !important;
  display: flex;
  .wb,
  .wx {
    width: 160px;
    height: 100px;
    margin-right: 10px;
    background-color: #303133;
    text-align: center;
    color: #909399;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
.title {
  color: #fff;
  margin-bottom: 25px;
}
i {
  font-size: 40px;
}
.footerCopyRight {
  background-color: #1f1f1f;
  display: flow-root;
}
.copyRight {
  color: #909399;
  text-align: center;
  font-size: 12px;
  margin: 8px;
}
.copyRight1 {
  padding-top: 20px;
}
.copyRight3 {
  padding-bottom: 20px;
}
</style>
